---
import Popup from '../components/Popup.astro'
import Layout from '../layouts/Layout.astro'
import Header from '../components/Header.svelte'
import Footer from '../components/Footer.svelte'
import Generator from '../components/Generator'
import BackTop from '../components/BackTop.astro'
import '../message.css'
import 'katex/dist/katex.min.css'
import 'highlight.js/styles/atom-one-dark.css'
---

<Layout title="Endless Chat">
  <div class="relative mx-auto max-w-85ch min-h-screen flex flex-col flex-col justify-between bg-transparent px-2rem transition-max-width !min-h-100dvh 2xl:max-w-105ch xl:max-w-95ch md:(bg-$c-bg shadow-2xl shadow-black/10 dark:shadow-black/15)">
    <Header client:load dark={Astro.cookies.get('dark')?.boolean()} />
    <Generator client:load />
    <Footer origin={Astro.request.headers.get('host') || ''} />
    <BackTop />
    { Astro.cookies.get('privacyPolicy')?.value !== 'confirmed' && <Popup /> }
  </div>
</Layout>

<script>
import Lenis from 'lenis'

const lenis = new Lenis({ lerp: 0.3 })

function raf(time: number) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)
</script>

<style is:global>
  :root {
    --c-fg-2: rgba(68, 68, 68, 0.02);
    --c-fg-5: rgba(68, 68, 68, 0.05);
    --c-fg-10: rgba(68, 68, 68, 0.1);
    --c-fg-15: rgba(68, 68, 68, 0.15);
    --c-fg-20: rgba(68, 68, 68, 0.2);
    --c-fg-30: rgba(68, 68, 68, 0.3);
    --c-fg-40: rgba(68, 68, 68, 0.4);
    --c-fg-50: rgba(68, 68, 68, 0.5);
    --c-fg-60: rgba(68, 68, 68, 0.6);
    --c-fg-70: rgba(68, 68, 68, 0.7);
    --c-fg-80: rgba(68, 68, 68, 0.8);
    --c-fg-90: rgba(68, 68, 68, 0.9);
  }

  html.dark {
    --c-fg-2: rgba(221, 221, 240, 0.02);
    --c-fg-5: rgba(221, 221, 240, 0.05);
    --c-fg-10: rgba(221, 221, 240, 0.1);
    --c-fg-15: rgba(221, 221, 240, 0.15);
    --c-fg-20: rgba(221, 221, 240, 0.2);
    --c-fg-30: rgba(221, 221, 240, 0.3);
    --c-fg-40: rgba(221, 221, 240, 0.4);
    --c-fg-50: rgba(221, 221, 240, 0.5);
    --c-fg-60: rgba(221, 221, 240, 0.6);
    --c-fg-70: rgba(221, 221, 240, 0.7);
    --c-fg-80: rgba(221, 221, 240, 0.8);
    --c-fg-90: rgba(221, 221, 240, 0.9);
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--c-scroll);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--c-scroll-hover);
  }

  ::-webkit-scrollbar-track {
    background-color: var(--c-bg);
  }

  @media (max-height: 850px), (max-width: 700px) {
    #tips {
      opacity: 0;
    }
  }

  @media (max-height: 800px) {
    #tips {
      display: none;
    }
  }

  code::-webkit-scrollbar {
    display: none;
  }
</style>
